<template>
  <div class="repList">
    <!-- 成绩单列表 -->
    <div class="search">
      <div class="box1">
        <el-select
          v-model="scoreId"
          clearable
          placeholder="请选择评分表"
          @change="scoreChange"
          @clear="scoreClear"
        >
          <el-option
            v-for="item in selectScoreList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <!-- <div class="box2">
        <el-input v-model="page.taskName" placeholder="搜索姓名"></el-input>
      </div>
      <div class="box2">
        <el-input v-model="page.taskName" placeholder="搜索学号"></el-input>
      </div> -->
      <button @click="searchBtn">查询</button>
    </div>
    <div class="table">
      <div style="text-align: center" class="pagbox">
        <el-table
          :data="selectTaskresultscoreList"
          :header-cell-style="{
            textAlign: 'center',
            color: '#333',
            fontWeight: '400',
            fontSize: '14px',
            height: '62px',
          }"
          :cell-style="{ textAlign: 'center', padding: '5px' }"
          style="width: 98%; margin: 0 auto"
        >
          <el-table-column>
            <template slot-scope="picture">
              <img class="avatar" :src="picture.row.userUrl" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="name">
              <a style="color: #409EFF" @click="checkInfo(name.row)">{{
                name.row.userName
              }}</a>
            </template>
          </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="sex">
              <div v-if="sex.row.sex === 1">
                <img src="@/assets/male.png" />
                <span>男</span>
              </div>
              <div v-else>
                <img src="@/assets/formale.png" />
                <span>女</span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="年龄" prop="age"> </el-table-column> -->
          <el-table-column label="学号" prop="studentId"> </el-table-column>
          <el-table-column label="专业">
            <template slot-scope="scope">
              <span v-if="scope.row.score.length !== 0">
                {{ scope.row.score[0].scoreName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="组织机构" prop="dpname" width="150"> </el-table-column>
          <el-table-column
            v-for="item in selectTittleList.bigTittle"
            :key="item.abilityId"
            :label="item.abilityName"
            :prop="item.tittle"
            sortable
          >
          </el-table-column>
          <el-table-column
            v-for="item in selectTittleList.smallTittle"
            :key="item.abilityId"
            :label="item.abilityName"
            :prop="item.tittle"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagebox">
      <el-pagination
        v-model="page"
        background
        layout="prev, pager, next"
        :total="totalcount"
        :page-size="page.pageSize"
        :current-page="page.page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getSelectScore, getSelectTittle, getSelectTaskresultscore} from '@/api/repcard/repcard.js';
export default {
  name: 'repList',
  data() {
    return {
      selectScoreList: [], // 评分表数据
      scoreId: null, // 评分表id
      selectTittleList: {}, // 表头数据
      selectTaskresultscoreList: [], // 成绩单列表数据
      page: { // 搜索数据
        page: 1,
        pageSize: 8,
        evaluationId: null
      },
      totalcount: null, // 总条数
      changeScore: false // 是否切换评分表
    };
  },
  created() {
    this.getSelectScore();
  },
  methods: {
    // 获取评分表
    async getSelectScore() {
      const {data} = await getSelectScore({userId: parseInt(sessionStorage.getItem('userid')), userType: parseInt(sessionStorage.getItem('usertype'))});
      // console.log(res);
      this.selectScoreList = data;
      // console.log(this.selectScoreList);
      for (let i = 0; i < this.selectScoreList.length; i++) {
        if (this.selectScoreList[i] === null) {
          this.selectScoreList.splice(i, 1);
          i--;
        }
      }
    },
    // 查询按钮
    async searchBtn() {
      // console.log(this.scoreId);
      if (this.changeScore === true) {
        this.page.page = 1;
      }
      if (this.scoreId !== null) {
        const {data} = await getSelectTittle({evaluationId: this.scoreId});
        this.selectTittleList = data;
        this.page.evaluationId = this.scoreId;
        const res = await getSelectTaskresultscore(this.page);
        this.totalcount = res.totalcount;
        this.selectTaskresultscoreList = [];
        res.data.forEach(item => {
          item = {...item, ...item.bigMap, ...item.smallMap};
          this.selectTaskresultscoreList.push(item);
        });
        this.changeScore = false;
      }
      // console.log(this.selectTaskresultscoreList);
    },
    // 下拉框change事件
    scoreChange() {
      // this.page.page = 1;
      this.changeScore = true;
    },
    // 下拉框清除事件
    scoreClear() {
      this.scoreId = null;
    },
    // 翻页
    handleCurrentChange(currentPage) {
      this.page.page = currentPage;
      this.searchBtn();
    },

    // ----------------------------------------
    // 点击姓名查看详情
    checkInfo(i) {
      // console.log(i);
      localStorage.setItem('studentEvaluationId', this.scoreId);
      localStorage.setItem('studentUserId', i.userId);
      localStorage.setItem('studentUserName', i.userName);
      this.$router.push('/reportInfo');
    }
  }
};
</script>

<style lang="less" scoped>
/deep/::-webkit-scrollbar {
  width: 10px; /*高宽分别对应横竖滚动条的尺寸 */
  max-height: 10px;
}
.repList {
  padding: 0 20px;
  padding-bottom: 0;
  .search {
    // width: 1225px;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    // justify-content: space-between;
    .box1 {
      position: relative;
      width: 185px;
      font-size: 12px;
    }
    .box2 {
      width: 215px;
      height: 32px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #f1f4ff;
    }
    button {
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 34px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
      margin-left: 30px;
    }
  }
  .table {
    // height: 65.5vh;
    background: #ffffff;
    box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow-y: auto;
    td {
      img {
        width: 15px;
        height: 15px;
        position: relative;
        top: 2px;
      }
      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        box-shadow: 0 0 3px #888;
      }
    }
  }
  .pagebox {
    width: 100vw;
    display: flex;
    justify-content: center;
    .el-pagination {
      padding-bottom: 20px;
      /deep/.btn-prev {
        width: 32px;
        height: 32px;
        background-color: #faf9ff;
      }
      /deep/.btn-next {
        width: 32px;
        height: 32px;
        background-color: #faf9ff;
      }
    }
  }

  /deep/.el-icon-arrow-left:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-icon-arrow-right:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-pager li {
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 32px;
    border-radius: 50% !important;
    background-color: #faf9ff !important;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
    color: #ffffff !important;
    box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
  }
}
</style>
